'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { 
  Users, 
  BookOpen, 
  FileText, 
  TrendingUp,
  Eye,
  Download,
  Clock,
  Star
} from 'lucide-react'

const stats = [
  {
    title: '总用户数',
    value: '1,234',
    change: '+12%',
    changeType: 'positive' as const,
    icon: Users,
    description: '较上月增长'
  },
  {
    title: '知识库文章',
    value: '5,678',
    change: '+8%',
    changeType: 'positive' as const,
    icon: BookOpen,
    description: '较上月增长'
  },
  {
    title: '文件数量',
    value: '2,345',
    change: '+15%',
    changeType: 'positive' as const,
    icon: FileText,
    description: '较上月增长'
  },
  {
    title: '访问量',
    value: '89,123',
    change: '+23%',
    changeType: 'positive' as const,
    icon: Eye,
    description: '较上月增长'
  },
  {
    title: '下载次数',
    value: '12,456',
    change: '+5%',
    changeType: 'positive' as const,
    icon: Download,
    description: '较上月增长'
  },
  {
    title: '平均响应时间',
    value: '120ms',
    change: '-8%',
    changeType: 'negative' as const,
    icon: Clock,
    description: '较上月改善'
  }
]

export function DashboardStats() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {stats.map((stat) => (
        <Card key={stat.title} className="hover:shadow-md transition-shadow">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              {stat.title}
            </CardTitle>
            <stat.icon className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stat.value}</div>
            <div className="flex items-center space-x-2 text-xs text-muted-foreground">
              <span className={stat.changeType === 'positive' ? 'text-green-600' : 'text-red-600'}>
                {stat.change}
              </span>
              <span>{stat.description}</span>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
